<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fluid</title>

    <link rel="stylesheet" href="../../lib/styles.css" />

    <script type="text/javascript" src="../../lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="../../lib/aircity/ac.min.js"></script>
  </head>
  <body>
    <div id="player"></div>

    <div class="btn-list">
      <div onclick="add()" class="btn">创建对象</div>
      <div onclick="clearLayer()" class="btn">清除图层</div>
    </div>

    <script type="text/javascript">
      const add = async () => {
        __g.camera.set(519436.508125, 2462308.559375, 602.064023, -36.568867, -14.275552, 2)

        const sourcePoint = [520077.65, 2462262.24, 211.196171875]

        fdapi.fluid.delete('ff')
        let fluid = {
          id: 'ff',
          bbox: [sourcePoint[0] - 1000, sourcePoint[1] - 1000, sourcePoint[2] - 100, sourcePoint[0] + 1000, sourcePoint[1] + 1000, sourcePoint[2] + 100], // 流体仿真的包围盒范围
          style: 4, //  流体样式，共28种水样式，取值范围：[0~27]
          // 出水点信息
          sources: [
            {
              id: 'ff_1', //  出水点ID
              rotation: [0, 0, 0], // 出水点旋转
              bbox: [sourcePoint[0] - 10, sourcePoint[1] - 10, sourcePoint[2] + 1, sourcePoint[0] + 10, sourcePoint[1] + 10, sourcePoint[2] + 4], // 出水点范围
              velocity: [-1, -2], //  出水点uv向量（流速、流向）
              shape: 0, // 出水点形状，取值范围：[0,1]，0矩形出水点，1圆形出水点
              duration: 3 // 出水点仿真执行时间，单位：秒，默认值：-1，即一直执行，大于0则按时间执行
            }
          ]
        }
        await fdapi.fluid.add(fluid)

        let data = [
          {
            id: 'ff',
            sources: [
              {
                id: 'ff_1',
                active: true
              }
            ]
          }
        ]
        await fdapi.fluid.continueSource(data) // 激活出水点
      }

      const clearLayer = () => {
        fdapi.fluid.clear()
      }
      /**
       * 初始化场景
       */
      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
          domId: 'player',
          apiOptions: {
            // onReady: function () {
            //   fdapi.reset(2 | 4)
            // }
            onEvent: function (event) {
              const eventType = event.eventtype
              console.log('onEvent', event)
            }
          }
        })
      }

      /**
       * 自适应分辨率
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      // 页面加载调用
      window.addEventListener('load', OnLoad, true)

      // 页面窗口变换调用
      window.addEventListener('resize', onResize, true)
    </script>
  </body>
</html>
